<lv-datatable
  #lvTable
  [ngClass]="{
    'lv-transfer-table-has-col-control': lvShowColControl,
    'lv-transfer-table-has-remove': lvBelong === 'target' && columns?.length && isAutoMove
  }"
  [lvAsync]="lvAsync"
  [lvData]="lvData"
  [lvCompareWith]="lvDataKey"
  [lvPaginator]="lvPaginator"
  [lvSize]="lvSize"
  [lvSelectionMode]="'multiple'"
  [(lvSelection)]="selection"
  (lvSelectionChange)="selectionChange($event)"
  (lvStateChange)="stateChange($event)"
>
  <thead>
    <tr>
      <th *ngIf="belong === 'source' || !isAutoMove" width="32px" class="lv-transfer-table-checkbox-th"><!-- 占位 --></th>
      <ng-container *ngFor="let col of columns; let i = index">
        <th
          *ngIf="!col.isHidden"
          [lvCellKey]="col.key"
          [width]="col.width"
          [lvAlign]="col.align"
          [lvShowFilter]="!!col.filterType && (col.filterType === filterType.DEFAULT || col.filterType === 'default')"
          [lvFilterMultiple]="col.filterMultiple"
          [lvFilters]="col.filters"
          [lvFilterCheckAll]="col.filterCheckAll"
          [lvFilterSearch]="col.filterSearch"
          [lvFilterAuto]="col.filterAuto || !col.filterMultiple"
          [lvFilterMode]="col.filterMode"
          [lvFilterCaseSensitive]="col.caseSensitive"
          [lvFilterTemplate]="col.filtersTemplate || tableFilterTpl"
          [lvFilterIcon]="col.filterIcon || 'lv-icon-filter'"
          [lvCustomFilter]="col.customFilter"
          [lvCustomItemFilter]="col.customItemFilter"
          (lvFilterChange)="filterChange($event)"
          lvShowCustom
        >
          <span lv-overflow>{{ col.label }}</span>
          <div lvCustom *ngIf="!!col.filterType" class="lv-transfer-table-customer-filter">
            <!-- 自定义搜索 -->
            <ng-container *ngIf="!!col.filterType && ![filterType.DEFAULT, 'default' ].includes(col.filterType)">
              <ng-container *ngTemplateOutlet="iconTpl; context: { $implicit: col }"></ng-container>
            </ng-container>
          </div>
        </th>
      </ng-container>
      <!--目标容器删除操作-->
      <th *ngIf="belong === 'target' && columns?.length && isAutoMove" width="40px"></th>
      <!-- 列配置 -->
      <th *ngIf="lvShowColControl" width="16px" style="padding: 0">
        <ng-container *ngTemplateOutlet="colConfigTpl"></ng-container>
      </th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let item of lvTable.renderData; index as i; trackBy: trackByIndex">
      <tr [ngStyle]="{cursor: getRowCursor(item)}" (click)="toggleSelect(item)">
        <td *ngIf="belong === 'source' || !isAutoMove" lvShowCheckbox [lvRowData]="item" [lvDisabled]="item.disabled"></td>
        <ng-container *ngFor="let col of columns">
          <td *ngIf="!col.isHidden" [lvRowData]="item" [lvAlign]="col.align">
            <!-- 自定义单元格 -->
            <ng-container *ngIf="typeUtils.isTemplateRef(col?.render)">
              <ng-container *ngTemplateOutlet="col.render; context: { $implicit: item, col: col, index: i }"></ng-container>
            </ng-container>

            <!-- 内置单元格 -->
            <ng-container *ngIf="!typeUtils.isTemplateRef(col?.render)">
              <span lv-overflow>{{ item[col.key] | nil }}</span>
            </ng-container>
          </td>
        </ng-container>
        <td *ngIf="belong === 'target' && isAutoMove" [ngClass]="{ 'lv-transfer-item-remove-td': lvShowColControl }">
          <i *ngIf="!item.disabled" lv-icon="lv-icon-clear" class="lv-transfer-item-remove" lvColorState (click)="removeItem(item)"></i>
        </td>
        <td *ngIf="lvShowColControl"><!-- 列过滤器占位 --></td>
      </tr>
    </ng-container>
  </tbody>
</lv-datatable>

<!-- 列配置模板 -->
<ng-template #colConfigTpl>
  <div
    class="lv-transfer-table-control-item"
    lv-dropdown
    [lvDropdownMenus]="columns"
    lvDropdownPosition="bottomRight"
    [lvDropdownLabelTemplate]="colItemConfigTpl"
    [lvDropdownItemClickClose]="false"
  >
    <i lv-icon="lv-icon-col-setting" lvColorState></i>
  </div>
</ng-template>
<ng-template #colItemConfigTpl let-data>
  <label lv-checkbox [ngModel]="!data.isHidden" [lvControl]="true" [lvDisabled]="data.disabled" (click)="_toggleCols($event, data)">
    {{ data.label }}
  </label>
</ng-template>

<!-- 表头过滤下拉模板 -->
<ng-template #tableFilterTpl let-item>
  <span lv-overflow>{{ item.aliasLabel || item.label }}</span>
</ng-template>

<!-- 表头自定义icon模板：过滤搜索、日期搜索模板 -->
<ng-template #iconTpl let-col>
  <i
    lvColorState
    [lv-icon]="col.filterType === filterType.SEARCH || col.filterType === 'search' ? 'lv-icon-search' : 'lv-icon-filter'"
    [ngClass]="{ active: (params?.filters || {})[col.key] }"
    #filterPopover="lvPopover"
    #popover="lvPopover"
    lv-popover
    [lvPopoverContent]="col.filterType === filterType.SEARCH || col.filterType === 'search' ? searchFilterTpl : dateFilterTpl"
    [lvPopoverBeforeOpen]="_beforeOpen(col)"
    [lvPopoverBeforeClose]="_beforeClose"
    lvPopoverPosition="bottomLeft"
    lvPopoverTrigger="click"
    lvPopoverShowArrow="false"
  ></i>
</ng-template>

<!-- 搜索模板 -->
<ng-template #searchFilterTpl>
  <lv-search
    class="lv-transfer-table-search"
    [(ngModel)]="filterParam[currentSearchKey]"
    [lvFocus]="true"
    (lvSearch)="_search($event)"
  ></lv-search>
</ng-template>

<!-- 日期模板 -->
<ng-template #dateFilterTpl>
  <lv-date-range-picker [(ngModel)]="filterParam[currentSearchKey]" lvInline="true"></lv-date-range-picker>
  <lv-group lvGutter="8px" class="lv-transfer-table-date-btn">
    <button lv-button lvType="primary" [disabled]="_isNullDate()" (click)="_selectDate()">{{ 'ok' | i18n }}</button>
    <button lv-button (click)="_resetDate()">{{ 'reset' | i18n }}</button>
  </lv-group>
</ng-template>
